<template>
<div class="container">
  <n-tabs v-model:value="activeTab" type="line" size="large" @update:value="initOrRefresh">
    <n-tab name="today" :class="{ 'active-tab': activeTab === 'today' }">今天</n-tab>
    <n-tab name="week" :class="{ 'active-tab': activeTab === 'week' }">本周</n-tab>
    <n-tab name="month" :class="{ 'active-tab': activeTab === 'month' }">本月</n-tab>
  </n-tabs>
  <div class="panel-view">
    <n-row>
      <n-col :span="12">
        <n-statistic label="Finished Count:" :value="panel.finished"></n-statistic>
      </n-col>
      <n-col :span="12">
        <n-statistic label="Left Count:" :value="panel.unfinished"></n-statistic>
      </n-col>
    </n-row>
  </div>
  <div class="bar-view">
    <canvas id="myChart" ref="chartRef"></canvas>
  </div>
</div>
</template>

<script setup>
import { taskChartUrl } from '../api.config';
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { Chart, registerables } from 'chart.js'
import { NTabs, NTab, } from 'naive-ui'

Chart.register(...registerables);

const chart = ref(null);
const chartRef = ref();
const chartDataset = reactive({
  cols: [],
  finishedSet: [],
  createSet: [],
})
const panel = reactive({
  finished: 0,
  unfinished: 0
})
const activeTab = ref('today')

onMounted( () => {
  initOrRefresh()
})

const initOrRefresh = async () => {
  const res = await getChart();
  chartDataset.cols = res.chart.cols;
  chartDataset.finishedSet = res.chart.dataset.map(item => Number(item.finished || 0))
  chartDataset.createSet = res.chart.dataset.map(item => Number(item.create || 0))
  panel.finished = res.panel.finished
  panel.unfinished = res.panel.unfinished
  chartGeneral()
}

const CHART_COLORS = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};

const chartGeneral = () => {
  if(chart.value){
    chart.value.destroy()
  }

  const _cols = chartDataset.cols.length > 7 ? chartDataset.cols.map(item => {
    const start = item.indexOf('-');
    return item.substring(start+1)
  }) : chartDataset.cols

  let max = Math.round(Math.max.apply(null, [...chartDataset.finishedSet, ...chartDataset.createSet]) * 1.2);
  const data = {
    labels: _cols,
    datasets: [
      {
        label: 'Finished Task Line',
        data: chartDataset.finishedSet,
        borderColor: CHART_COLORS.red,
        fill: false,
        cubicInterpolationMode: 'monotone',
        tension: 0.4
      },
      {
        label: 'Create Task Line',
        data: chartDataset.createSet,
        borderColor: CHART_COLORS.blue,
        fill: false,
        tension: 0.4
      },
      {
        label: 'Finished Task Bar',
        data: chartDataset.finishedSet,
        backgroundColor: 'rgba(255, 99, 132, .4)',
        fill: false,
        cubicInterpolationMode: 'monotone',
        tension: 0.4,
        type: 'bar'
      },
      {
        label: 'Create Task Bar',
        data: chartDataset.createSet,
        backgroundColor: 'rgba(54, 162, 235, 0.4)',
        fill: false,
        tension: 0.4,
        type: 'bar'
      }
    ]
  };
  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Task Chart'
        },
      },
      interaction: {
        intersect: false,
      },
      scales: {
        x: {
          display: true,
          title: {
            display: true
          },
          gridLines: {
            display:false
          }
        },
        y: {
          display: true,
          title: {
            display: true,
            text: 'Value'
          },
          gridLines: {
            display:false
          },
          suggestedMin: 0,
          suggestedMax: max
        }
      }
    },
  };
  chart.value = new Chart(chartRef.value, config);
}

const getChart = async () => {
  const res = await axios.post(taskChartUrl, {'data_type': activeTab.value==='today'?'day':activeTab.value,'chart_type': activeTab.value==='month'?'month':'week'}, {headers:{'Content-Type': 'application/x-www-form-urlencoded'}})
  return res.data.data
}
</script>

<style scoped>
.container{
  margin: 0 auto;
  padding: 30px 60px;
  box-sizing: border-box;
}

.panel-view{
  width: 50%;
  margin-bottom: 30px;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

#myChart{
  width: 100%;
  height: 100%;
}

.n-tabs {
  margin-bottom: 0;
}

.n-tab {
  color: #666; /* 未选中项的颜色 */
  font-weight: bold;
  transition: color 0.3s ease;
}

.n-tab.active-tab {
  color: #FFA500; /* 选中项的颜色 */
}

.bar-view{
    width: 50%;
}
</style>
